<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	    <meta name="viewport" content="width=device-width, initial-scale=1" />
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>登录</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet" />
	    <link href="css/bootstrapValidator.min.css" rel="stylesheet" />
	    <style>
	    	.container.main {
	    		margin-top: 100px;
	    	}
	    	.form-box {
				margin-top: 50px;
			}
	    </style>
	
	    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	    <!--[if lt IE 9]>
	      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
	<body>
	    
	    <div id="header"></div>
	    
	    <div class="container main">	
		    
		    <div class="row">
		    	<!--面板/登录账号-->
		    	<div class="col-xs-8">
		    		<img src="img/login-bg.png" alt="" width="100%" />
		    	</div>
		    	<div class="col-xs-4 form-box">
		    		<div class="panel panel-primary">
		    			<div class="panel-heading">
						    <h3 class="panel-title">登录账号</h3>
						</div>	
						<div class="panel-body">
							
							<form method="post" name="" action="index.html">
							    <div class="form-group">
							        <label for="exampleInputEmail1">用户名</label>
							        <input class="form-control" name="username" placeholder="请输入用户名..." title="请输入..." />
							    </div>
							    <div class="form-group">
							        <label for="exampleInputPassword1">Password</label>
							        <input type="password" class="form-control" name="password" placeholder="请输入密码..." title="请输入..." />
							    </div>
							    
							    <!--登录-->
	                            <!--<input type="submit" name="submit" class="btn btn-primary sub-btn" value="登录" />-->
	                            <a href="home.html" class="btn btn-primary sub-btn">登录</a>
	                            
							</form>
							
		    		    </div>
							
					</div>
				</div>
		    </div>
	    	
	    </div>
	    
	    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	    <script src="js/vendor/jquery-2.2.4.min.js"></script>
	    <!-- Include all compiled plugins (below), or include individual files as needed -->
	    <!--<script src="js/vendor/bootstrap.min.js"></script>-->
	    <!--bootstrap验证-->
	    <script src="js/vendor/BootstrapValidator.min.js"></script>
	    <script>
	    	$('#header').load('header.html');
	    	
	    	$(function () {
		        $('form').bootstrapValidator({
		            message: 'This value is not valid',
		            feedbackIcons: {
		                valid: 'glyphicon glyphicon-ok',
		                invalid: 'glyphicon glyphicon-remove',
		                validating: 'glyphicon glyphicon-refresh'
		            },
		            fields: {
		                username: {
		                    message: '用户名验证失败',
		                    validators: {
		                        notEmpty: {
		                            message: '用户名不能为空'
		                        },
		                        stringLength: {
		                            min: 6,
		                            max: 18,
		                            message: '用户名长度必须在6到18位之间'
		                        },
		                        regexp: {
		                            regexp: /^[a-zA-Z0-9_]+$/,
		                            message: '用户名只能包含大写、小写、数字和下划线'
		                        }
		                    }
		                },
		                password: {
		                    validators: {
		                        notEmpty: {
		                            message: ' 密码不能为空'
		                        },
		                        stringLength: {
		                            min: 6,
		                            max: 18,
		                            message: '密码长度必须在6到18位之间'
		                        },
		                        regexp: {
		                            regexp: /^[a-zA-Z0-9_]+$/,
		                            message: '用户名只能包含大写、小写、数字和下划线'
		                        }
		                    }
		                }
		            },
		            submitHandler: function (validator, form, submitButton) {
		                $('input[type="submit"]').on('success.form.bv', function(e) {
						    e.preventDefault();
						    var form = $(e.target);
						    /**提交代码**/
						    $('form').submit();
						});
		            }
		        });
		    });
	    	
	    </script>
	</body>
</html>
